<template>
    <a-modal v-bind="defaultModalProps" v-model:open="open"
        title="创建知识库"
        :width="674"
        :ok-button-props="{size: 'large'}"
        :cancel-button-props="{size: 'large'}"
        :confirm-loading="formLoading"
        :body-style="{paddingInline: '8px',paddingBlock: '24px'}"
        @cancel="handleCancel()"
        @ok="handleConfirm()"
    >
        <Form v-bind="defaultFormProps"
            :rules
            :model="formState"
            label-align="right"
            size="large"
            :labelCol
            ref="formRef"
        >
            <FormItem label="知识库名称" name="name">
                <a-input v-model:value="formState.name" placeholder="如公司介绍知识库，销售岗位知识库，业务产品知识库" />
            </FormItem>
            <FormItem label="知识库模板" name="groupId">
                <a-select v-model:value="formState.groupId" placeholder="请选择" :options="templateOptions" :loading="tempalteLoading" />
            </FormItem>
            <FormItem label="知识库描述" name="description">
                <a-textarea v-model:value="formState.description" :rows="5" placeholder="请输入描述" />
            </FormItem>
        </Form>
    </a-modal>
</template>
<script lang="ts" setup>
import { Form, FormItem, message } from 'ant-design-vue';
import { defaultModalProps, defaultFormProps } from '@/constants/comp-setting';
import { type Exposed } from './types';
import type { KnowledgeResult } from '@/api/siderBar/model';
import { getKnowledgeKnowledgetemplates, postKnowledgeKnowledgeadd, putKnowledgeKnowledgeeditId } from '@/api/siderBar/knowledge';
defineOptions({
    name: 'AIKnowActionModal',
    inheritAttrs: false
})
defineExpose<Exposed>({
    open(_current) {
        populate(_current)
        open.value = true
    },
})
type FormState = {
    name?: string
    groupId?: number
    description?: string
}
const emit = defineEmits<{
    success: [mode: 'create' | 'update', id?: number]
}>()
const open = ref(false)
const labelCol = {style: {width: '90px'}}
const current = ref<INullable<KnowledgeResult>>(null)
const isUpdate = computed(() => !!current.value)
const { data: templateOptions, loading: tempalteLoading } = useRequest(() => getKnowledgeKnowledgetemplates(), { initialData: [] })
const {
    formLoading,
    formRef,
    formState,
    resetFormState,
    rules,
    handleFormSubmit
} = useFormState<FormState>({
    getInitialState() {
        return {}
    },
    rules: {
        name: {
            required: true,
            message: '请输入知识库名称'
        },
        groupId: {
            required: true,
            message: '请选择知识库模板'
        },
        description: {
            required: true,
            message: '请输入知识库描述'
        }
    }
})
function populate(_current?: KnowledgeResult) {
    if (_current) {
        current.value = _current
        formState.value.name = _current.name
        formState.value.groupId = _current.groupId
        formState.value.description = _current.desc
    }
}
function handleCancel() {
    open.value = false
    current.value = null
    resetFormState()
}
async function handleConfirm() {
    let id: MaybeUndefined<number> = void 0
    const _isUpdate = toValue(isUpdate)
    await handleFormSubmit(({ name, groupId, description }) => {
        return _isUpdate ? putKnowledgeKnowledgeeditId(toValue(current)!.id, { name: name!, groupId: groupId!, desc: description }) : postKnowledgeKnowledgeadd({ name: name!, groupId: groupId!, desc: description }).then(_id => id = _id)
    })
    message.success('操作成功')
    handleCancel()
    emit('success', _isUpdate ? 'update' : 'create', id)
}
</script>